<template>
  <div class="add-exam-main">
    <eagle-input
      v-model="data.ExamName"
      title="考试名称"
      rows="3"
      autosize
      type="textarea"
      placeholder="30字以内"
      maxlength="30"
      multiRow
      isInputText
      isMust
    ></eagle-input>
    <eagle-input
      required
      readonly
      label="选择试卷"
      islink
      inputalign="right"
      @click="chooseExam"
    >
      <template #input>
        <span style="color: #999">{{
          data.PaperName || "请选择使用的试卷"
        }}</span>
      </template>
    </eagle-input>
    <eagle-input
      label="阅卷人"
      v-if="data.PaperName"
      required
      readonly
      islink
      inputalign="right"
      @click="goExamPeople('MarkChnName')"
    >
      <template #input>
        <span style="color: #999">{{
          data.MarkChnName || "请选择批阅人"
        }}</span>
      </template>
    </eagle-input>
    <eagle-input
      title="考试说明"
      v-model="data.Introduce"
      rows="3"
      autosize
      type="textarea"
      placeholder="200字以内"
      maxlength="200"
      multiRow
      isInputText
      isMust
    ></eagle-input>
    <eagle-date-picker
      v-model="data.ExamStartTime"
      label="开始时间"
      is-link
      input-align="right"
      required
      @change="examStartChange"
      :minDate="startMinDate"
    ></eagle-date-picker>
    <eagle-date-picker
      v-model="data.ExamEndTime"
      label="截止时间"
      is-link
      input-align="right"
      required
      :minDate="endMinDate"
    ></eagle-date-picker>
    <!-- <eagle-cell
		title="开始时间"
		is-link
      :value="data.ExamStartTime"
      @click="showPopup('ExamStartTime', data.ExamStartTime)"
	></eagle-cell>
	<eagle-cell
      title="截止时间"
      is-link
      :value="data.ExamEndTime"
      @click="showPopup('ExamEndTime', data.ExamEndTime)"
    /> -->
    <!-- <van-popup v-model="show" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        title="选择时间"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="show = false"
        @confirm="confirmPicker"
      />
    </van-popup> -->
    <eagle-input label="考试时间（分钟）" required readonly inputalign="right">
      <template #input>
        <input class="input-num" v-model="data.ExamMins" type="number" />
      </template>
    </eagle-input>
    <eagle-input readonly label="允许重复考试">
      <template #input>
        <eagle-checkbox v-model="data.IsAllowedRepeatExam" shape="square" />
      </template>
    </eagle-input>
    <eagle-input
      required
      readonly
      labelWidth="120"
      inputalign="right"
      label="最多重考次数"
      v-if="data.IsAllowedRepeatExam"
    >
      <template #input>
        <input class="input-num" v-model="data.RepeatExamTimes" type="number" />
      </template>
    </eagle-input>
    <eagle-input
      label="考试人员"
      islink
      required
      readonly
      @click="goExamPeople('ExamUsers')"
    >
      <template #input>
        <div v-if="data.ExamUsers && data.ExamUsers.length" style="color: #999">
          已选择{{ data.ExamUsers.length }}个人员
        </div>
        <span v-else style="color: #999"> 请选择考试人员</span>
      </template>
    </eagle-input>
    <eagle-input label="评估方式" required readonly>
      <template #input>
        <eagle-radio-group v-model="data.EvaluationType" direction="horizontal">
          <eagle-radio name="1">按分数</eagle-radio>
          <eagle-radio name="2">按比例</eagle-radio>
        </eagle-radio-group>
      </template>
    </eagle-input>
    <div class="bottom-desc" v-if="data.EvaluationType == 1">
      <span>超过</span
      ><input class="input-num" v-model="data.EvaluationValue" type="number" />
      <div>分通过，按总分统计评估结果</div>
    </div>
    <div class="bottom-desc" v-if="data.EvaluationType == 2">
      <span>超过</span
      ><input class="input-num" v-model="data.EvaluationValue" type="number" />
      <div>比例（%）通过，按总分计算百分比统计评估结果</div>
    </div>

    <div class="bottom_submit">
      <eagle-button type="primary" @click="_submit(true)">
        提交并立即发布
      </eagle-button>
      <eagle-button type="info" @click="_submit(false)">
        暂存稍后发布
      </eagle-button>
    </div>
    <eagle-calendar color="#1989fa" v-model="showCalendar" @confirm="onConfirm" />
    <ExamListDialog title="选择试卷" :selectedValue="data.PaperCode" :show.sync="examListShow" @callback="_chooseExamList" ></ExamListDialog>
    <!-- 选择人 -->
    <UserChoose
      title="选择人员"
      :show.sync="UserChooseShow"
      :rowIndex="typeKey == 'MarkChnName' ? 0 : 1"
      :isOpenNew="true"
      :tagData="typeKey == 'MarkChnName' ? markTagData : examTagData"
      @callback="_chooseUserCb"
      :isMulti="true"
    ></UserChoose>
  </div>
</template>

<script>
import { getDetail, addPostExam, getEditApiDetail } from "@/api/addexam";
import { formatDate, getDateTime,formatDate2 } from "@/utils/getDate";
import ExamListDialog from "@/views/components/train/examListDialog.vue";
import UserChoose from "@/views/components/user/userChooseDialog.vue";
export default {
  components: { UserChoose,ExamListDialog },
  data() {
    return {
      data: {},
      showCalendar: false,
      type: "",
      currentDate: new Date(),
      show: false,
      examListShow: false,
      UserChooseShow: false,
      startMinDate: new Date(this.$moment().format("YYYY/MM/DD HH:mm:ss")),
      endMinDate:new Date(this.$moment().format("YYYY/MM/DD HH:mm:ss")),
      maxDate: new Date(2030, 12, 30),
      examTagData: [],
      markTagData: [],
      typeKey: "",
    };
  },
  created() {
    // 列表进来刷新,编辑
    if (this.$route.query.id && this.$route.query.key == "edit") {
      this.getEditApiDetail(this.$route.query.id);
    } else {
      this.getDetail();
    }
  },

  activated() {
    if (this.$route.query.id == 0) {
      this.getDetail();
    }
    // 试卷
    // if (this.$route.params.examData) {
    //   this.data.PaperCode = this.$route.params.examData.PaperCode;
    //   this.data.PaperName = this.$route.params.examData.PaperName;
    // }
    // if (this.$route.params.type) {
    //   const type = this.$route.params.type;
    //   // 阅卷人
    //   if (type == "MarkChnName") {
    //     var MarkUserName = this.$route.params.userlist.map((item) => {
    //       return item.code;
    //     });
    //     var MarkChnName = this.$route.params.userlist.map((item) => {
    //       return item.name;
    //     });
    //     this.data.MarkUserName = MarkUserName.join(",");
    //     this.data.MarkChnName = MarkChnName.join(",");
    //   }
    //   // 考试人
    //   if (type == "ExamUsers") {
    //     var ExamUsers = this.$route.params.userlist.map((item) => {
    //       return {
    //         UserName: item.code,
    //         ChnName: item.name,
    //         OrgName: item.OrgName,
    //         OrgCode: item.OrgCode,
    //       };
    //     });
    //     this.data.ExamUsers = ExamUsers;
    //   }
    // }
  },
  methods: {
    // 显示弹窗
    showPopup(type, val) {
      if (val) {
        this.currentDate = new Date(val);
      } else {
        this.currentDate = new Date();
      }
      if (type == "ExamStartTime") {
        this.type = "ExamStartTime";
      } else {
        this.type = "ExamEndTime";
      }
      this.show = true;
    },
    // 确认选择的时间
    confirmPicker(val) {
      const dateTime = formatDate(val);
      if (this.type == "ExamEndTime") {
        let beginTime = new Date(this.data.ExamStartTime);
        if (beginTime.getTime() > val.getTime()) {
          this.$toast("请选择当前日期之后的有效日期");
          this.show = false;
          return;
        } else {
          this.data[this.type] = getDateTime(dateTime);
          this.show = false;
        }
      } else {
        this.data[this.type] = getDateTime(dateTime);
        this.show = false;
      }
    },
    // 选项格式化函数
    formatter(type, value) {
      console.log("asdadasd", type);
    },
    getEditApiDetail(id) {
      getEditApiDetail({ id }).then((res) => {
        this.data = res.data;
      });
    },
    getDetail() {
      getDetail().then((res) => {
        this.data = res.data;
        this.data.ExamStartTime = getDateTime(res.data.ExamStartTime);
      });
    },
    _chooseUserCb(data) {
      let user = this.common.getCodeAndNames(data, {
        code: "UserName",
        name: "ChnName",
      });
      // 阅卷人
      if (this.typeKey == "MarkChnName") {
        this.markTagData = data;
        this.data.MarkUserName = user.code;
        this.data.MarkChnName = user.name;
      }
      // 考试人
      if (this.typeKey == "ExamUsers") {
        this.examTagData = data;
        this.data.ExamUsers = data;
      }
      this.UserChooseShow = false;
    },
    onConfirm(date) {
      const dateTime = formatDate(date);
      this.data[this.type] = getDateTime(dateTime);
      this.showCalendar = false;
    },
    // 打开日历
    openCalendar(type) {
      if (type == "ExamStartTime") {
        this.type = "ExamStartTime";
      } else {
        this.type = "ExamEndTime";
      }
      this.showCalendar = true;
    },
    // 选择试卷
    chooseExam() {
      this.examListShow = true;
      // this.$router.push({
      //   name: "ExamList",
      //   params: {
      //     path: "AddExam",
      //   },
      // });
      // this.$router.push('/Train/ExamList')
    },
    _chooseExamList(param) {
      if (param) {
        this.data.PaperName = param.PaperName
        this.data.PaperCode = param.PaperCode;
        // this.data.PaperName = param.PaperName;
      }
      this.examListShow = false;

      console.log("adasdasd", param);
    },
    // 选择人员
    goExamPeople(type) {
      this.typeKey = type;
      this.UserChooseShow = true;
      // this.$router.push({
      //   name: "ExamPeople",
      //   params: {
      //     type: type,
      //     path: "AddExam",
      //   },
      // });
    },
    // 保存
    _submit(IsPublish) {
      if (!this.data.ExamName) {
        return this.$toast("请输入考试名称");
      }
      if (!this.data.PaperCode) {
        return this.$toast("请选择试卷");
      }
      if (!this.data.MarkUserName) {
        return this.$toast("请选择阅卷人");
      }
      if (!this.data.ExamStartTime) {
        return this.$toast("请选择开始时间");
      }
      if (!this.data.ExamEndTime) {
        return this.$toast("请选择结束时间");
      }
      if (!this.data.ExamMins) {
        return this.$toast("请输入考试时间");
      }
      if (!this.data.ExamUsers || this.data.ExamUsers.length < 1) {
        return this.$toast("请选择考试人员");
      }
      if (!this.data.EvaluationType) {
        return this.$toast("请选择评估方式");
      }
      const formData = {
        IsPublish: IsPublish,
        ID: this.data.ID,
        ExamName: this.data.ExamName,
        PaperCode: this.data.PaperCode,
        Introduce: this.data.Introduce,
        ExamStartTime: this.data.ExamStartTime,
        ExamEndTime: this.data.ExamEndTime,
        ExamMins: this.data.ExamMins,
        MarkUserName: this.data.MarkUserName,
        MarkChnName: this.data.MarkChnName,
        EvaluationValue: this.data.EvaluationValue,
        EvaluationType: this.data.EvaluationType,
        ExamType: this.data.ExamType,
        IsAllowedRepeatExam: this.data.IsAllowedRepeatExam,
        RepeatExamTimes: this.data.RepeatExamTimes,
      };
      formData.ExamUsers = this.data.ExamUsers;
      addPostExam(formData).then((res) => {
        this.$toast("保存成功");
        setTimeout(() => {
          this.$router.goRefresh();
        }, 500);
      });
    },
    examStartChange(val){
      this.endMinDate = new Date(this.$moment(val).format("YYYY/MM/DD HH:mm:ss"))
    }
  },
};
</script>

<style lang="less" scoped>
.add-exam-main {
  min-height: 100vh;
  padding-bottom: 30px;
  .bottom_submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    .van-button {
      width: 45%;
      height: 35px;
    }
  }
  .col-detail {
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .col-del {
      display: flex;
      align-items: center;
      img {
        width: 15px;
        height: 15px;
        margin-right: 5px;
      }
    }
  }
  .valueclass {
    color: rgb(0, 195, 224);
  }
  .input-num {
    display: block;
    width: 50px;
    min-height: 20px;
    background-color: #f8f8f8;
    border: none;
    text-align: center;
  }
  .bottom-desc {
    min-height: 40px;
    display: flex;
    padding: 10px 15px;
    font-size: 13px;
    background-color: #fff;
    color: #646566;
    .input-num {
      margin: 0 5px;
    }
    span {
      width: 30px;
    }
  }
}
</style>
<style lang="less">
.add-exam-main {
  .textarea {
    .van-field__control {
      background-color: #f8f8f8 !important;
    }
  }
}
</style>